<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>moonJs demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style>
html, body, p, div {margin:0;padding:0;}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script src="../libs/cocos2d-js-v3.6-min.js"></script>
<script src="../libs/moonCocos2d.js"></script>
<script src="../libs/vector2d.js"></script>
<script>
    canvas=document.getElementById('canvas');
    canvas.style.backgroundColor = '#999999';
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //游戏说明：拖动摇杆控制
    function loaded(){
        cc.game.onStart = function(){
            var MyScene = cc.Scene.extend({
                onEnter () {
                    this._super();
                    cc.init(this);
                    this.time=0;
                    this.cnt=0;
                    this.max=2.5;
                    this.colors=[MoonConst.GREEN,MoonConst.GREEN2];
                    this.colorIndex=0;
                    
                    let [staW,staH,maxW,maxH]=[cc.winSize.width,cc.winSize.height,cc.winSize.width*2,cc.winSize.height*2];
                    var layer=new Layer(MoonConst.BLUE3,maxW,maxH);
                    layer.pos=cc.v2((staW-maxW)/2,(staH-maxH)/2);
                    layer.position=layer.pos;
                    
                    this.addChild(layer);
                    this.layer=layer;

                    var map=new ShapeNode();
                    map.createGridding({x:50,y:50,width:maxW,height:maxH},cc.color.WHITE,0.5)
                    layer.addChild(map);
                    var control=cc.createControlBar(this,60,30,cc.color(200,200,200,100),cc.color(20,20,20,100));
                    control.child.position=cc.v2(200,200);
                    control.setPositionChildEqual(control.child.position)
                    control.on(MoonConst.EVENT_CONTROL,this.onColor.bind(this),this)
                    layer.addChild(control);
                    
                    this.orgPos=cc.v2(maxW/2,maxH/2);
                    this.man=new ShapeNode();
                    this.man.createCircle(10,this.getColor());
                    this.man.position=this.orgPos
                    console.log(layer.position,this.orgPos,maxW);
                    layer.addChild(this.man);
                    this.mans=[this.man];
                    for(let i=0;i<20;i++){
                        this.getBody();
                    }
                    this.foods=[];
                    for(let i=0;i<100;i++){
                        let m=new ShapeNode();
                        m.createCircle(5);
                        m.position=cc.v2(maxW*Math.random(),maxH*Math.random());
                        this.foods.push(m);
                        layer.addChild(m);
                    }
                },
                getBody(end){
                    let m=new ShapeNode();
                    m.createCircle(10,this.getColor());
                    m.position=end?end:this.man.position;
                    this.mans.push(m);
                    this.layer.addChild(m);
                },
                getColor(){
                    this.colorIndex=1-this.colorIndex;
                    return this.colors[this.colorIndex];
                },
                onColor(da){
                    if(da.p.x!=0&&da.p.y!=0){
                        this.v2=new Vector2D(da.p.x,da.p.y);
                        this.v2.normalize();
                        this.v2.length=this.max;
                    }
                },
                gameOver(){
                    alert('game over');
                    this.v2=null;
                    this.layer.position=this.layer.pos;
                    for(var i=this.mans.length-1;i>0;i--){
                        let m=this.mans[i];
                        m.v2=null;
                        m.position=this.orgPos;
                    }
                    this.man.position=this.orgPos;
                },
                update(dt){
                    if(this.man&&this.v2){
                        this.time+=dt;
                        if(this.time>0.1){
                            for(var i=1;i<this.mans.length;i++){
                                let prev=this.mans[i-1];
                                let next=this.mans[i];
                                if(prev.x!=this.orgPos.x){
                                    let v2=new Vector2D(prev.x-next.x,prev.y-next.y)
                                    v2.normalize();
                                    v2.length=this.max;
                                    next.v2=v2;
                                }
                            }
                            this.time=0;
                        }
                        for(var i=1;i<this.mans.length;i++){
                                let m=this.mans[i];
                                if(m.v2){
                                    m.x+=m.v2.x;
                                    m.y+=m.v2.y;
                                }
                            }
                        this.man.x+=this.v2.x;
                        this.man.y+=this.v2.y;
                        this.layer.x-=this.v2.x;
                        this.layer.y-=this.v2.y;

                        if(this.man.x<0||this.man.y<0){
                            this.gameOver();
                        }
                        if(this.man.x>this.layer.width||this.man.y>this.layer.height){
                            this.gameOver();
                        }
                        let len=this.foods.length;
                        for(let i=0;i<len;i++){
                            let o=this.foods[i];
                            let [x,y]=[o.x-this.man.x,o.y-this.man.y];
                            if(Math.hypot(x,y)<20){
                                this.getBody(this.mans[this.mans.length-1].position);
                                this.layer.removeChild(o);
                                this.foods.splice(i,1);
                                break;
                            }
                        }
                    }
                }
            });
            cc.director.runScene(new MyScene());
        };
        cc.game.run("canvas");     
    }
    loaded();
</script>
</body>
</html>